<template lang='pug'>
  .page
    .search-form.mb-15.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 客户名称：
          Input(v-model="customerName" placeholder="请输入" clearable)
        Col.pr-20.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}") 
          span.label-txt.w80 费用月份：   
          DatePicker.w-100(v-model="date" placeholder="请选择月份" type="month" :options="monthOptions" format="yyyy-MM")
        Col.pr-20.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}") 
          span.label-txt.w80 合作关系：   
          Select(v-model="cooperateStatus"  placeholder="请选择合作关系" clearable)
            Option(v-for="(item, index) in cooperateStatus_arr" :value="item.key" :key="index") {{ item.value }}
        Col.pr-20.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w120 费用是否核对：
          RadioGroup.beautiful-radio-group(type="button" v-model="isVerified")
            Radio.display-inline-block(v-for="(c_item, index) of radioArr" :key="index" :label="c_item.value") {{c_item.label}}
        Col.pr-20.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w120 空账单：
          RadioGroup.beautiful-radio-group(type="button" v-model="isNoBill")
            Radio.display-inline-block(v-for="(c_item, index) of isBillArr" :key="index" :label="c_item.value") {{c_item.label}}
        Col.pr-20.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 所属客服：
          Select(v-model="serverId" placeholder="请选择所属客服" filterable clearable)
            Option(v-for="(item, index) in serverId_arr" :value="item.key" :key="index") {{ item.value }}
          Button.ml-15(type="info" @click="searchFn" v-if="hasFind") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(:columns="thead" :data="listData" :loading="loading" :stripe="true")
        ._table_header(slot="header")
          .table-title-lefttxt.pull-left
            span.leftText
              | 合计:
              span.text-info.pl-5.pr-5.font-weight {{totalRows}}
              | 条
            Divider(type="vertical")
            span.leftText
              | 已核对:
              span.text-info.pl-5.pr-5.font-weight {{verifiedCount}}
              | 条
            Divider(type="vertical")
            span.leftText
              | 未核对:
              span.text-info.pl-5.pr-5.font-weight {{notVerifiedCount}}
              | 条
          .pull-right.table-title-btns
            i-button.mr-10(type="info" @click="exportVerifyBill" v-if="hasExport") 导出
        template(slot-scope="{ row, index }" slot="isVerified")
          span {{row.isVerified ? '已核对' : '未核对'}}
        template(slot-scope="{ row, index }" slot="isNoBill")
          span {{row.isBill ? '否' : '是'}}
        ._table_footer(slot="footer")
          Page(class="_page" :total="totalRows" :current="PageIndex" prev-text="上一页" next-text="下一页" @on-change="onChangePage" @on-page-size-change="onpageSizeChange" show-sizer show-total :page-size-opts="[10, 20, 30, 50, 100]")
</template>

<script>
import billVerifyStatisticsApi from '@/api/BillVerifyStatistics.api.js'
import billVerifyTotalApi from '@/api/BillVerifyTotal.api.js'
import dataApi from '@/api/data.js'
import moment from 'moment'
export default {
  name:'billVerifyTotal',
  props:{},
  data () {
    return {
      monthOptions: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
      loading: false,
      customerName: '',
      serverId: '',
      isVerified: '-1',
      isNoBill: '-1',
      date: new Date(),
      radioArr: [{ value: '-1', label: '全部' }, { value: '0', label: '未核对' }, { value: '1', label: '已核对' }],
      isBillArr: [{ value: '-1', label: '全部' }, { value: '0', label: '是' }, { value: '1', label: '否' }],
      serverId_arr: [], // 所属客服数组
      cooperateStatus: '1',
      cooperateStatus_arr: [], // 合作关系
      cooperationType_arr: [], // 合作类型
      thead: [
        {
          title: '客户单位名称',
          minWidth: 190,
          align: 'center',
          key: 'name'
        },
        {
          title: '合作类型',
          minWidth: 190,
          align: 'center',
          key: 'typeName'
        },
        {
          title: '上级名称',
          minWidth: 120,
          align: 'center',
          key: 'parentName'
        },
        {
          title: '费用月份',
          minWidth: 120,
          align: 'center',
          key: 'feeDate'
        },
        {
          title: '所属客服',
          minWidth: 150,
          align: 'center',
          key: 'hrName'
        },
        {
          title: '状态',
          minWidth: 150,
          align: 'center',
          slot: 'isVerified',
        },
        {
          title: '核对人',
          minWidth: 150,
          align: 'center',
          key: 'verifyName'
        },
        {
          title: '空账单',
          minWidth: 150,
          align: 'center',
          slot: 'isNoBill',
        },
        {
          title: '完成时间',
          minWidth: 150,
          align: 'center',
          key: 'verifyTime',
          render: (h, params) => {
            let row = params.row
            let times = row.verifyTime ? moment(row.verifyTime).format('YYYY-MM-DD HH:mm') : ''
            return h('span', times)
          }
        }
      ],
      listData: [],
      totalRows: 0,
      notVerifiedCount: 0,
      verifiedCount: 0,
      PageIndex: 1,
      PageSize: 10

    }
  },

  components: {},

  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasFind () {
      console.log(this.actionArr,'actionArr')
      return this.actionArr.indexOf('Find') > -1
    },
    // 查看
    hasExport () {
      return this.actionArr.indexOf('Export') > -1
    },
  },

  beforeMount() {},

  mounted() {
    this.serverDown()
    this.getEnum()
    this.getList()
  },

  methods: {
    searchFn () {
      this.PageIndex = 1
      this.getList()
    },
    getList () {
      billVerifyStatisticsApi.find({
        CustomerName: this.customerName,
        ServerId: this.serverId,
        IsNoBill: this.isNoBill,
        IsVerified: this.isVerified,
        CooperateStatus: this.cooperateStatus,
        Year: this.$moment(this.date).format('YYYY'),
        Month: this.$moment(this.date).format('MM'),
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }).then(res => {
        if (res.data.success) {
          this.listData = res.data.data.map(item=>{
            return {
              ...item,
              typeName: this.cooperationType_arr.find(type => {return type.key == item.type}).value
            }
          })
          this.totalRows = res.data.totalRows
          this.notVerifiedCount = res.data.notVerifiedCount
          this.verifiedCount = res.data.verifiedCount
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    exportVerifyBill () {
      billVerifyStatisticsApi.export({
        CustomerName: this.customerName,
        ServerId: this.serverId,
        IsNoBill: this.isNoBill,
        IsVerified: this.isVerified,
        CooperateStatus: this.cooperateStatus,
        Year: this.$moment(this.date).format('YYYY'),
        Month: this.$moment(this.date).format('MM'),
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }).then(res => {
        if (res.data.success) {
          let objectUrl = res.data.message
          const link = document.createElement('a')
          link.download = ''
          link.href = objectUrl
          link.click()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    /**
     * server所属客服下拉数据
     */
    serverDown () {
      let data = {
        pageIndex: 1,
        pageSize: 1000
      }
      billVerifyTotalApi.postServers(data).then(res => {
        this.serverId_arr = res.data[0].items
      })
    },
    /**
     * 分页
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.PageIndex = val
      this.getList()
    },
    /**
     * 分页页码变动
     */
    onpageSizeChange (val) {
      this.PageIndex = 1
      this.PageSize = val
      this.getList()
    },
    /**
     * 数据字典
     */
    getEnum () {
      let groupNames = 'customer.status,customer.type'
      dataApi.getEnum({
        groupName: groupNames
      }).then((res) => {
        this.cooperateStatus_arr = this.getItems(res.data, 'customer.status')
        this.cooperationType_arr = this.getItems(res.data, 'customer.type')
    console.log('this.cooperationType_arr: ', this.cooperationType_arr)
      })
    },
    getItems (arr, key) {
      let object = arr.find((item) => {
        return item.group === key
      })
      return object.items
    }
  },

  watch: {}

}

</script>
<style lang='less' scoped>

</style>